<template>
    <div id="materials">
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin: 0 0 0 1%">
                <el-input v-model="MaterielNum" placeholder="原料代号" ></el-input>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin:  0 1%;">
                <el-input v-model="MaterielName" placeholder="物料名称"></el-input>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="">
                <el-input v-model="Specifications" placeholder="规格型号" ></el-input>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin:  0 1%;">
                <el-input v-model="SpecExplain" placeholder="规格说明" ></el-input>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin: 0 1% 0 0">
                <el-select v-model="Category" clearable filterable placeholder="原料 / 辅料">
                    <el-option label="原料" value="原料"></el-option>
                    <el-option label="辅料" value="辅料"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="margin: 0 2% 0 0">
                <el-select v-model="MaterSource" clearable filterable placeholder="自购 / 客供">
                    <el-option label="自购" value="自购"></el-option>
                    <el-option label="客供" value="客供"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add" >新增物料</el-button>
            </el-col>
        </div>
        <!-- 原料表格 -->
        <el-table  max-height="600" class="table_materials" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="MaterielCode" sortable label="序号" v-if="false"></el-table-column>
            <el-table-column prop="MaterielNum" sortable label="物料代号"></el-table-column>
            <el-table-column prop="MaterielName" sortable label="物料名称"></el-table-column>
            <el-table-column prop="Specifications" sortable show-overflow-tooltip label="规格型号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="SpecExplain" label="规格说明" show-overflow-tooltip show-overflow-tooltip></el-table-column>
            <el-table-column prop="MaterSource" sortable  label="购置方式"></el-table-column>
            <el-table-column prop="Unit" sortable  label="单位"></el-table-column>
            <el-table-column prop="Category" sortable  label="物料状态"></el-table-column>
            <el-table-column prop="FigureNumber" sortable  label="物料图号"></el-table-column>
            <el-table-column prop="ImagePath" sortable  label="物料图片"></el-table-column>
            <el-table-column prop="ModifyDate" sortable label="日期" ></el-table-column>
            <el-table-column prop="UserName" sortable label="操作人员" ></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作" fixed="right">
                <template scope="scope">
                    <el-button
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增物料 -->
        <el-dialog title="新增物料" :visible.sync="dialogFormVisible" >
            <el-form :model="form" style="width: 90%;height: 100%;margin: auto;text-align: left">
                <el-form-item label="物料状态" :label-width="formLabelWidth">
                    <el-select v-model="form.Category" clearable placeholder="原料 / 辅料" style="float: left;">
                        <el-option label="原料" value="原料"></el-option>
                        <el-option label="辅料" value="辅料"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="购置方式" :label-width="formLabelWidth">
                    <el-select v-model="form.MaterSource" clearable placeholder="自购 / 客供" style="float: left;">
                        <el-option label="自购" value="自购"></el-option>
                        <el-option label="客供" value="客供"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物料单位" :label-width="formLabelWidth">
                    <el-select v-model="form.Unit" clearable placeholder="请选择" style="float: left;">
                        <el-option label=" 个" value="个"></el-option>
                        <el-option label="米" value="米"></el-option>
                        <el-option label="克" value="克"></el-option>
                        <el-option label="pcs" value="pcs"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物料代号" :label-width="formLabelWidth">
                    <el-input v-model="form.MaterielNum" auto-complete="off" style="width: 80%"></el-input>                </el-form-item>
                <el-form-item label="物料名称" :label-width="formLabelWidth">
                    <el-input v-model="form.MaterielName" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="规格型号" :label-width="formLabelWidth">
                    <el-input v-model="form.Specifications"  auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="规格说明" :label-width="formLabelWidth">
                    <el-input v-model="form.SpecExplain" type="textarea" :autosize="{ minRows: 0, maxRows: 8}"  auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                l<el-form-item label="物料图号" :label-width="formLabelWidth">
                    <el-input stye="width: 80%"  v-model="form.FigureNumber" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="物料图片" :label-width="formLabelWidth"></el-form-item>
                <el-button>上传图片</el-button>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改物料 -->
        <el-dialog title="修改物料" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left;width: 90%;margin: auto">
                <el-form-item  label="物料状态"  :label-width="formLabelWidthEdit">
                    <el-select v-model="formEdit.Category" clearable placeholder="原料 / 辅料" >
                        <el-option label="原料" value="原料"></el-option>
                        <el-option label="辅料" value="辅料"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="购置方式" :label-width="formLabelWidth">
                    <el-select v-model="formEdit.MaterSource" clearable placeholder="自购 / 客供" >
                        <el-option label="自购" value="自购"></el-option>
                        <el-option label="客供" value="客供"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物料单位" :label-width="formLabelWidth">
                    <el-select v-model="formEdit.Unit" clearable placeholder="请选择" style="float: left;">
                        <el-option label=" 个" value="个"></el-option>
                        <el-option label="米" value="米"></el-option>
                        <el-option label="克" value="克"></el-option>
                        <el-option label="pcs" value="pcs"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物料代号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.MaterielNum" :disabled="true" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="物料名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.MaterielName" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="规格型号" :label-width="formLabelWidthEdit">
                    <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 8}" v-model="formEdit.Specifications" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="规格说明" :label-width="formLabelWidthEdit">
                    <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 8}" v-model="formEdit.SpecExplain" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="物料图号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.FigureNumber" auto-complete="off" style="width: 50%"></el-input>
                </el-form-item>
                <el-form-item label="物料图片" :label-width="formLabelWidthEdit">
                    <span v-model="formEdit.ImagePath"></span>
                </el-form-item>
                <el-button>上传图片</el-button>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除物料 -->
        <el-dialog title="删除物料" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    <!--  怎么把工站代码显示出来 -->
                    确定删除此物料吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script type="text/javascript">
    export default{
        data(){
            return {
                tableData:[],         //  表格
                //   查询
                MaterielCode:0,       //  物料唯一标示
                MaterielNum:'',       //  物料号
                MaterielName:'',      //  物料名称
                Specifications:'',    //  规格型号
                SpecExplain:'',    //  规格说明
                Category:'',       //  状态
                MaterSource:'' ,   //  自购  、 客供
                //    分页
                PageCount:10 ,     // 每页几条   page-size
                CurrentPage:1,     // 当前是第几页
                Total:0 ,          // 总数
                //   新增物料     将 form表单改成自己的参数
                dialogFormVisible: false,
                form: {
                    MaterielNum: '',      //  物料代号
                    MaterielName:'',      //  物料名称
                    Specifications: '',   //  规格型号
                    SpecExplain: '',      //  规格说明
                    Category: '',         //  状态
                    MaterSource:'',    //  客供 / 自购
                    FigureNumber: ''  ,   //  图号
                    ImagePath:''          //  图片
                },
                formLabelWidth: '100',
                //  编辑物料
                EditFormVisible: false,
                formEdit:{},
                formLabelWidthEdit:'100',
                //  删除物料
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100',
            }
        },
        methods:{
//                分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
//           物料表格  查询
            selectTable(){
                let url = "http://192.168.3.238:8088/MaterielManager/GetMaterielPage?MaterielNum=" + this.MaterielNum + "&MaterielName=" + this.MaterielName +
                        "&Specifications=" + this.Specifications +"&SpecExplain=" + this.SpecExplain +"&Category=" + this.Category +"&MaterSource="+ this.MaterSource +"&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage+"&MaterielType=1";
                console.log("url")
                console.log(url)
                this.$http.get(url,).then(response => {
                    this.tableData=[];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = response.data.Total;
                        for(let i=0;i<response.data.ObjList.length;i++){
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index=i+1;
                        }
                        console.log("表格添加成功  >>>>>>>>>>>>>>>>>>  ")
                        console.log(response.data)
                    }
                }, response=>{
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            //  新增物料
            add() {
                this.dialogFormVisible = true;
            },
            addForm(){   //   post
                let addUrl = "http://192.168.3.238:8088/MaterielManager/AddMateriel";
                let addForm = {
                    "MaterielNum":this.form.MaterielNum,
                    "MaterSource":this.form.MaterSource,     //  客供 / 自购
                    "MaterielName":this.form.MaterielName,
                    "Specifications":this.form.Specifications,
                    "SpecExplain":this.form.SpecExplain,
                    "Category":this.form.Category,
                    "FigureNumber":this.form.FigureNumber,
                    "ImagePath":this.form.ImagePath,
                    "Unit":this.form.Unit,    //  单位
                    "OperationUser":1
                };
                console.log("新增")
                console.log(addUrl)
                console.log(addForm)
                let that = this ;
                if(this.form.MaterielNum.length === 0 || this.form.MaterielName.length === 0){
                    alert("物料代号和物料名称均不能为空");
                    return 0;
                }
                else{
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            console.log("新增成功");
                            console.log(response);
                            that.dialogFormVisible = false ;
                            that.selectTable();
                        })
                        .catch(function (error) {
                            console.log("错误");
                            console.log(error);
                        });
                }
            },
            //   表格的操作，物料信息修改     post
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/MaterielManager/UpdateMateriel";
                let EditForm = {
                    "MaterielCode":this.formEdit.MaterielCode,
                    "MaterSource":this.formEdit.MaterSource,     //  客供 / 自购
                    "MaterielNum":this.formEdit.MaterielNum,
                    "MaterielName":this.formEdit.MaterielName,
                    "Specifications":this.formEdit.Specifications,
                    "SpecExplain":this.formEdit.SpecExplain,
                    "Category":this.formEdit.Category,
                    "FigureNumber":this.formEdit.FigureNumber,
                    "ImagePath":this.formEdit.ImagePath,
                    "Unit":this.formEdit.Unit,    //  单位
                    "OperationUser":1
                };
                console.log("修改")
                console.log(EditUrl)
                console.log(EditForm)
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //   物料信息删除            post     200 但是没有删除
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/MaterielManager/DeleteMateriel";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "MaterielCode":this.formDelete.MaterielCode,
                    "OperationUser":1
                };
                let that = this;  //   that管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功")
                        console.log(response)
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            }
        },
        mounted :function () {   //  onload
            this.selectTable();
        }
    }
</script>

<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #materials {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_materials thead tr th {
        text-align: center;
    }
</style>
